<!-- 
    佚名故事 anonymous-story
 -->
<template>
    <div>
        <Title-l>
            <template #name>
                AnonymousStory
            </template>
            <template #tap>
                <Button-l>more</Button-l>
            </template>
        </Title-l>
        <div v-for="i in arr" class="popular-item">
            <img :src="i.img" alt="" />
            <div class="content">
                <div class="title">{{ i.title }}</div>
                <div class="date">{{ i.date }}</div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
const arr = [
    {
        id: 1,
        title: "成水水水水水水水水水水水水水水成水水水水水水水水水水水水水水成水水水水水水水水水水水水水水",
        date: "2023-6",
        img: ""
    }
]
</script>

<style lang="scss" scoped>
.popular-item {
    display: flex;

    img {
        width: 200px;
        height: 120px;
        display: block;
    }

    >div {
        flex: 1;
        position: relative;
        padding-left: 20px;

        .title {
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden; //溢出内容隐藏
            text-overflow: ellipsis; //文本溢出部分用省略号表示
            display: -webkit-box; //特别显示模式
            -webkit-line-clamp: 2; //行数
            line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .date {
            position: absolute;
            right: 5px;
            bottom: 0;
        }
    }
}
</style>

 